<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/loginredirect.jsp"%>
<head>
    <title><fmt:message key="institution.title"/></title>
    <meta name="heading" content="<fmt:message key='institution.institution'/>"/>


    <script src='dwr/interface/Search.js'></script>
    <script src='dwr/engine.js'></script>
    <script src='dwr/util.js'></script>
    <script type="text/javascript">
        function formatDate(d) {
        return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear()
        }
    </script>
    <script>
        
        function fillInstitution(){
            
            var id = document.getElementById("institutionSelect");
            console.log = id.value;
            if(id.value != -1){
                Search.searchInstitutionByID(id.value,{callback:function(inst){
                    
                        //  alert(inst.institutionName);
                        dwr.util.setValue("institution.id", inst.id);
                        dwr.util.setValue("institution.institutionName",inst.institutionName);
                        dwr.util.setValue("institution.institutionCode",inst.institutionCode); 
                        dwr.util.setValue("institution.institutionDescription",inst.institutionDescription); 
                        dwr.util.setValue("institution.taxNumber",inst.taxNumber); 
                        dwr.util.setValue("institution.idNumber",inst.idNumber); 
                        dwr.util.setValue("institution.rkb",inst.rkb); 
                        dwr.util.setValue("institution.street",inst.street); 
                        dwr.util.setValue("institution.number",inst.number); 
                        if (inst.startDate!=null) dwr.util.setValue("institution.startDate",formatDate(inst.startDate));
                       if (inst.endDate!=null) dwr.util.setValue("institution.endDate",formatDate(inst.endDate));
                     if (inst.municipality != null){
                        dwr.util.setValue("municipalityId",inst.municipality.id);
                        dwr.util.setValue("municipality",inst.municipality.name);
                   
                     }
                          if (inst.area != null){
                       dwr.util.setValue("areaId",inst.area.id);
                        dwr.util.setValue("area",inst.area.name);

                          }
                               if (inst.founder != null){
                        dwr.util.setValue("founderSelect",inst.founder.name);
                               }
                                    if (inst.industry != null){
                        dwr.util.setValue("industrySelect",inst.industry.name);
                                    }

                
                    }
                });
            }
            
            
        }
        
        
    </script>

</head>

<form:form commandName="institutionForm" method="post" id="institutionForm" onsubmit="return validateInstitutionForm(this)">
    <form:errors path="*" cssClass="error" element="div"/>
    <form:hidden path="institution.id"/>
    <ul>
<!--        <p>-->
            <form:select path="" id="institutionSelect" onchange="fillInstitution()" >
                <form:option id="1" value="-1">
                    <fmt:message key='institutionSearch'/>
                </form:option>
               <c:forEach items="${institutionForm.instList}" var="inst">
                    <c:if test="${inst == institutionForm.institution}">
                        <form:option value="${inst.id}" id="${institutionForm.institution.id}" selected="true">
                            ${inst.institutionName}
                        </form:option>
                    </c:if>
                    <c:if test="${inst != institutionForm.institution}">
                        <form:option value="${inst.id}" id="${institutionForm.institution.id}">
                            ${inst.institutionName}
                        </form:option>
                    </c:if>
                </c:forEach>
            </form:select>
<!--        </p>

                <p>-->
           <!-- <appfuse:label styleClass="name" key="field.name"/> -->
            <form:errors path="institution.institutionName" cssClass="fieldError"/>
            <form:hidden path="institution.institutionName" id="institution.institutionName" cssClass="text medium toCyr" cssErrorClass="text medium error" maxlength="4096"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="field.code"/>
            <form:errors path="institution.institutionCode" cssClass="fieldError"/>
            <form:input path="institution.institutionCode" id="institution.institutionCode" cssClass="text medium toCyr" cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="field.description"/>
            <form:errors path="institution.institutionDescription" cssClass="fieldError"/>
            <form:textarea style="width: 500px; height: 60px;" path="institution.institutionDescription" id="institution.institutionDescription" cssClass="text medium toCyr" cssErrorClass="text medium error" maxlength="4096"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.taxNumber"/>
            <form:errors path="institution.taxNumber" cssClass="fieldError"/>
            <form:input path="institution.taxNumber" id="institution.taxNumber" cssClass="text medium" cssErrorClass="text medium error" minlength="13" maxlength="14"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.idNumber"/>
            <form:errors path="institution.idNumber" cssClass="fieldError"/>
            <form:input path="institution.idNumber" id="institution.idNumber" cssClass="text medium" cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.rkb"/>
            <form:errors path="institution.rkb" cssClass="fieldError"/>
            <form:input path="institution.rkb" id="institution.rkb" cssClass="text medium" cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.street"/>
            <form:errors path="institution.street" cssClass="fieldError"/>
            <form:input path="institution.street" id="institution.street" cssClass="text medium toCyr" cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.number"/>
            <form:errors path="institution.number" cssClass="fieldError"/>
            <form:input path="institution.number" id="institution.number" cssClass="text medium toCyr" cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.startDate"/>
            <form:errors path="institution.startDate" cssClass="fieldError"/>
            <form:input path="institution.startDate" id="institution.startDate" cssClass="input-small flexy_datepicker_input" value="" name="flexy_datepicker"  cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>
        <p>-->
            <appfuse:label styleClass="desc" key="institution.endDate"/>
            <form:errors path="institution.endDate" cssClass="fieldError"/>
            <form:input path="institution.endDate" id="institution.endDate" cssClass="input-small flexy_datepicker_input" value="" name="flexy_datepicker"  cssErrorClass="text medium error" maxlength="50"/>
<!--        </p>-->
        <p>
            <appfuse:label styleClass="desc" key="institution.status"/>
            <form:errors path="institution.status" cssClass="fieldError"/>
            <form:checkbox path="institution.status" value="1" id="status" cssClass="fieldError" cssErrorClass="text medium error" />
        </p>

        <p>
        <appfuse:label styleClass="left width150" key="institution.municipality" /> 

        <form:input id="municipality" class="input-medium toCyr" path="institution.municipality.name" />
            <form:hidden id="municipalityId" path="institution.municipality.id"/>
            <br class="clearboth" />
            </p>

            <p>
           <appfuse:label styleClass="left width150" key="institution.area"/>
           
           <form:input id="area" class="input-medium toCyr" path="institution.area.name"  />
            <form:hidden id="areaId" path="institution.area.id"/>
            <br class="clearboth" />
           </p>

       
        <p>
            <form:select path="institution.founder.id" id="founderSelect">

                <form:option id="1" value="">
                    <fmt:message key='founderSearch'/>
                </form:option>

                <c:forEach items="${institutionForm.founder}" var="founder">

                    <c:if test="${founder == institutionForm.institution.founder}">
                        <form:option value="${founder.id}" id="${institutionForm.institution.founder.id}" selected="true">
                            ${founder.name}
                        </form:option>

                    </c:if>
                    <c:if test="${founder != institutionForm.institution.founder}">
                        <form:option value="${founder.id}" id="${institutionForm.institution.founder.id}">
                            ${founder.name}
                        </form:option>


                    </c:if>
                </c:forEach>
            </form:select>
        </p>
        <p>
            <form:select path="institution.industry.id" id="industrySelect">
                <form:option id="1" value="">
                    <fmt:message key='industrySearch'/>
                </form:option>


                <c:forEach items="${institutionForm.industry}" var="industry">

                    <c:if test="${industry == institutionForm.institution.industry}">
                        <form:option value="${industry.id}" id="${institutionForm.institution.industry.id}" selected="true">
                            ${industry.name}
                        </form:option>
                    </c:if>
                    <c:if test="${industry != institutionForm.institution.industry}">
                        <form:option value="${industry.id}" id="${institutionForm.institution.industry.id}">
                            ${industry.name}
                        </form:option>
                    </c:if>
                </c:forEach>
            </form:select>
        </p>

        <p class="buttonBar bottom">
            <input type="submit" class="button" name="save" value="<fmt:message key="button.save"/>"/>
            <c:if test="${not empty institution.id}">
                <input type="submit" class="button" name="delete" onclick="bCancel=true;return confirmDelete('institution')"
                       value="<fmt:message key="button.delete"/>" />
            </c:if>
            <input type="button" class="button" name="cancel" value="<fmt:message key="button.cancel"/>" onclick="location.href='<c:url value="/mainMenu"/>'"/>
        </p>

    </ul>
</form:form>

<v:javascript formName="institutionForm" cdata="false" dynamicJavascript="true" staticJavascript="false"/>
<script type="text/javascript" src="<c:url value='/scripts/validator.jsp'/>"></script>
<script type="text/javascript">
    Form.focusFirstElement($('institutionForm'));
</script>

        <script type="text/javascript">

  new Autocomplete('municipality', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "Municipality",
    parent: "",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
       jQuery("#municipalityId").val(data);
       enableField("1", "#area");
    }
  });
</script>

            <script type="text/javascript">

  new Autocomplete('area', {
    serviceUrl:'<c:url value="/hello.json" />',
    minChars:1,
    clazz: "GeoArea",
    parent: "#municipality",
    maxHeight:500,
    width:300,
    deferRequestBy:300,
    // callback function:
    onSelect: function(value, data){
        jQuery("#areaId").val(data);

    }
  });

  jQuery("#municipality").blur( function () {
            if (jQuery("#municipalityId").val() == "") {
                jQuery(this).val("");
            }
            if (jQuery(this).val() == "") {
                jQuery("#municipalityId").val("");

                enableField("0", "#area");
            }
  });
  jQuery("#area").blur( function () {
            if (jQuery("#areaId").val() == "") {
                jQuery(this).val("");
            }
            if (jQuery(this).val() == "") {
                jQuery("#areaId").val();
            }

  });
//


//if (jQuery("#areaId").val() == "") {
//    enableField("0", "#area");
//}


function enableField(flag, el) {

    elem = jQuery(el);

    if (flag == "1") {
         elem.removeAttr("disabled");
         elem.css("background-color", "#EAEAEA");

    }
    else {
      elem.val("");
      elem.next().val("");
      elem.attr("disabled", "disabled");
      elem.css("background-color", "#ccc");
    }
}

</script>